<script>
	export default {
		data() {
			return {
				name: '张三',
				htmlStr: '<h2>网页代码</h2>',
				num: '3',
				num1: 5,
				show: false,
				seen: true
			}
		},
		methods: {
			changeName() {
				this.name = '李四'
			},

			changeNum1() {
				this.num1++
			}
		}
	}
</script>

<template>
	<!--插值 文本-->
	<h1>{{name}}</h1>

	<!--插值 HTML-->
	<span>{{htmlStr}}</span>
	<span v-html="htmlStr"></span>

	<!--插值 属性id name style css-->
	<h2 v-bind:id="num">属性插值</h2>
	<h2 :id="num">属性插值2</h2>

	<!-- 插值 使用JS表达式-->
	<h2>{{num1 + 1}}</h2>
	<h2>{{show ? "yes":"no"}}</h2>

	<!--指令 v-XX  -->
	<p v-if="seen">现在你能看到我了</p>

	<!-- v-on 监听 -->
	<button v-on:click="changeName">点击改名</button>
	<button @click="changeNum1">+</button>

</template>

<style>

</style>
